<template>
  <div id="modelStateList">
    <el-table
        :data="modelStateList"
        empty-text="No data"
        stripe
        style="width: 100%">
      <el-table-column
          fixed
          prop="name"
          label="Model"
          width="160">
      </el-table-column>
      <el-table-column
          prop="sTime"
          label="Start At"
          width="130">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ sTimeDateTime(scope.row.sTime) }}</p>
            <div slot="reference" class="name-wrapper">
              {{ sTimeTime(scope.row.sTime) }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          prop="elapsed"
          label="Elapsed"
          width="80">
      </el-table-column>
      <el-table-column
          prop="state"
          label="State"
          width="80">
        <template slot-scope="scope">
          <img :src="getStateImg(scope.row.state)">
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <div style="white-space: nowrap">
            <el-button
                :disabled="!checkFailed(scope.row.state)"
                type="info"
                plain
                size="mini"
                @click="handleRetry(scope.row)">Retry
            </el-button>
            <el-button
                :disabled="!checkFailed(scope.row.state)"
                type="warning"
                plain
                size="mini"
                @click="showDetail(scope.row)">Detail
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--    <button class="hw-btn hw-btn-medium" v-on:click="modelLoadFiles">Load</button>-->

    <el-dialog
        :title="logTitle"
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="handleClose">
      <span style="white-space: pre-line">{{ log }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import {mapState} from "vuex";
import running from "@/assets/running.svg"
import succeed from "@/assets/succeed.svg"
import failed from "@/assets/failed.svg"
import free from "@/assets/free.svg"
import pending from "@/assets/pending.svg"

export default {
  name: "ModelStateList",
  data() {
    return {
      running,
      succeed,
      failed,
      free,
      pending,
      dialogVisible: false,
      log: '',
      logTitle: '',
    }
  },
  components: {},
  computed: {
    ...mapState({
      modelStateList: state => state.model.modelStateList,
    }),
  },
  methods: {
    sTimeDateTime(time) {
      if (time.split(' ').length >= 2) {
        return time
      } else {
        return ''
      }
    },
    sTimeTime(time) {
      let sp = time.split(' ')
      if (sp.length >= 2) {
        return sp[1]
      } else {
        return time
      }
    },
    handleClose(done) {
      done();
    },
    checkFailed(state) {
      return state === this.$store.state.model.modelState.failed.id
    },
    handleRetry(row) {
      this.$store.commit(
          "initModelStateList",
          {
            'modelList': [row.name],
            'initState': this.$store.state.model.modelState.pending.id
          }
      )
      for (let model of this.$store.state.model.modelStateList) {
        if (model.name === row.name && model.state === this.$store.state.model.modelState.running.id) {
          this.$message({
            message: 'Model ' + row.name + ' is already running',
            type: 'warning'
          });
          return
        }
      }
      this.$store.dispatch('remoteStartReleasing', [row.name])
    },
    showDetail(row) {
      this.logTitle = row.name
      this.log = this.$store.state.model.modelLogList[row.name]
      this.dialogVisible = true
    },
    getStateImg(state) {
      if (state === this.$store.state.model.modelState.pending.id) {
        return this.pending
      } else if (state === this.$store.state.model.modelState.running.id) {
        return this.running
      } else if (state === this.$store.state.model.modelState.succeed.id) {
        return this.succeed
      } else if (state === this.$store.state.model.modelState.failed.id) {
        return this.failed
      } else {
        return this.free
      }
    }
  }
}
</script>

<style scoped>
#modelStateList {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: white;
}

</style>